0

私は書店のサイトを作成していますが、デザイナーはメニューを別々の本の山として表現したいと考えています。本の量が異なる4つの山があります（メニュー項目を読んでください）。ul を含む 4 つの li を含むメニューを作成できます (本)。メニューはJoomlaでそのように作成されるため、ulとliの表記に固執する必要があります。

問題は、本が棚に横たわっているのではなく、天井に浮いているように見えることです。本を棚に寝かせるにはどうすればよいですか。

例: http://jsfiddle.net/cJ8an/

<html>
<head>
<style>

* {
margin: 0;
padding: 0;
}

a {
text-decoration: none;
color: white;
background: red;
padding: 2px 10px;
}

a:hover {
color: black;
}

ul li {
float: left;
list-style: none;
}

ul li ul {
margin-right: 25px;
}

ul li ul li {
float: none;
margin-top: 5px;
}

hr {
clear: both;
height: 10px;
background: brown;
}

</style>
</head>
<body>
<ul>
<li>
    <ul>
        <li><a href="#">HOME</a></li>
    </ul>
</li>
<li>
    <ul>
        <li><a href="#">BOEKENTIPS</a></li>
        <li><a href="#">MEER DAN BOEKEN</a></li>
        <li><a href="#">NIEUWS</a></li>
    </ul>
</li>
<li>
    <ul>
        <li><a href="#">LEZERSBLOG</a></li>
        <li><a href="#">BESTELFORMULIER</a></li>
        <li><a href="#">VERTELTHEATER</a></li>
        <li><a href="#">ANTROPOSOFIE</a></li>
    </ul>
</li>
<li>
    <ul>
        <li><a href="#">CONTACT</a></li>
        <li><a href="#">SCHOLEN</a></li>
        <li><a href="#">KINDEROPVANG</a></li>
    </ul>
</li>
</ul>
<hr id="bookshelf" />
</body>
</html>
4

1 に答える 1