Question

我在将垂直子菜单转换为水平子菜单时遇到了一些麻烦，我尝试的所有内容似乎都不正确，或者我最终改变了主菜单外观的其余部分。

HTML

    <nav>
            <ul>

                <li><a href="index.html">HOME</a></li>

                <li><a href="justjoelabout.html">ABOUT</a></li>

                <li><a href='#'><span>WORK</span></a>

            <ul>

                    <li class="services1">

                    <a href="justjoelprint.html">PRINT</a>

                    <a href="justjoelbranding.html">BRANDING</a>

                    <a href="justjoeleditorial.html">EDITORIAL</a>

                    <a href="justjoelphotography.html">PHOTOGRAPHY</a>

                    </ul>

                    </li>

                <li><a href="justjoelblog.html">BLOG</a></li>

                <li><a href="justjoelinspired.html">INSPIRED</a></li>

                <li><a href="justjoelcontact.html">CONTACT</a></li>

            </ul>

    </nav>

这是CSS

 nav {
height: 70px;
float: left;
font-size: 20px;
color: #00BCDC;
font-family: "geogtq md";
 }

 nav ul {
list-style-type: none;
color: #00BBE4;
font-family: "geogtq md";
float: left;
display:inline; 
 }

 nav li {
float: left;
margin-right: 20px;
color: #00BBE4;
font-family: "geogtq md";
margin-left: auto;
display: inline;
 }

 a:link {
text-decoration: none;
color: #00C0EE;
font-family: "geogtq md";
 }
 a:visited {
text-decoration: none;
color: #00C0EE;
 }
 a:hover {
text-decoration: none;
color: #007889;
 }
 a:active {
text-decoration: none;
color: #00C0EE;
 }


 ul {
font-family: "geogtq md";
font-size: 20px;
margin: 0;
padding: 0;
list-style: none;
 }
 ul li {
display: inline;
position: relative;
float: left;
 }

 li ul {
display: none;
 }

 ul li a {
text-decoration: none;
margin-right:5px;
white-space: nowrap;
color:#066;
 }

 li:hover ul {
display: inline;
position: absolute;
 }

 li:hover li {
float: none;
font-size: 16px;
font-weight:bold;
margin-top:3px;
 }

 .services1 a {
color:#00C0EE;
float: left;
list-style-type: none;
display:inline;
 }

http://jsfiddle.net/GMbCU/

任何帮助将不胜感激，因为这已经持续了一段时间，并将有助于我的网站上的事情，谢谢

Answer 1

试试这个：http://jsfiddle.net/pzC2g/

<nav>
    <ul class='root'>
        <li><a href="index.html">HOME</a></li>
        <li><a href="justjoelabout.html">ABOUT</a></li>
        <li><a href='#'><span>WORK</span></a>
            <ul class='sub'>
                <li><a href="justjoelprint.html">PRINT</a></li>
                <li><a href="justjoelbranding.html">BRANDING</a></li>
                <li><a href="justjoeleditorial.html">EDITORIAL</a></li>
                <li><a href="justjoelphotography.html">PHOTOGRAPHY</a></li>    
            </ul>
        </li>
        <li><a href="justjoelblog.html">BLOG</a></li>
        <li><a href="justjoelinspired.html">INSPIRED</a></li>
        <li><a href="justjoelcontact.html">CONTACT</a></li>
    </ul>
</nav>

和css

.root {
    display: block;
}

.root li {
    display: inline-block;
    float: left;
    margin-right: 20px;
}

.root li .sub {
    display: none;
}

.root li:hover .sub {
    display: block;
    position: absolute;
}

.root li:hover .sub li {
    display: inline-block;
    float: left;
}

Answer 2

只要给孩子足够的宽度，并将每个链接放在自己的LI中。你已经让它们显示内联。

http://jsfiddle.net/GMbCU/7

li ul {
    width: 450px;
}

Answer 3

使用样式更新了上述内容，请参阅链接：http://jsfiddle.net/pzC2g/27/ 感谢Goldj的大力支持，

**

*, html{
  margin: 0;
  padding:0;
}

nav{
 background-color: #222;
 
}

.wrapper{
margin: 0 auto;
padding: 0px;
max-width: 1150px;
min-height:100%;
}


.root {
    display: block;
}

.root li {
    padding:10px;
    display: inline-block;
    margin-right: 20px;
	color: #fff;
}

.root li:hover{
  background-color:#555;
}

.root li a{ 
   display:block;
   text-decoration:none;
   color:inherit;
  
}
.root li a:hover{
  display:block;
 
}

.root li .sub {
    background-color: #fff;
	border: 1px solid #222;
	margin-top: 10px;
	left:0;
	width:99.9%;
	display: none;
	font-size:14px;
}

.root li:hover .sub {
    display: block;
    position: absolute;
}

.root li:hover .sub li {
	color: #000;
    display: inline-block;
    float: left;
}

.root li .sub li:hover {
    background-color: #222;  
	color: #fff;
 }

<nav>
   <div class="wrapper">
    <ul class='root'>
        <li><a href="index.html">HOME</a></li>
        <li><a href="#">ABOUT</a></li>
        <li><a href='#'><span>WORK</span></a>
            <ul class='sub'>
			    <div class="wrapper">
                <li><a href="justjoelprint.html">PRINT</a></li>
                <li><a href="justjoelbranding.html">BRANDING</a></li>
                <li><a href="justjoeleditorial.html">EDITORIAL</a></li>
                <li><a href="justjoelphotography.html">PHOTOGRAPHY</a></li> 
                </div>				
            </ul>
        </li>
        <li><a href="#">BLOG</a></li>
        <li><a href="#">INSPIRED</a></li>
        <li><a href="#">CONTACT</a></li>
    </ul>
  </div>
</nav>

**

使子菜单水平运行

3 个答案: