问水平SubMenu
EN

Stack Overflow用户

提问于 2015-10-19 05:52:05

回答 1查看 2.6K关注 0票数 4

我想要创建一个水平的子菜单导航栏，当我悬停在适当的菜单项上方时，它会出现在初始导航栏下面。我无法使下拉子菜单显示为水平，并且在混乱的显示之后:内联，顶部菜单和子菜单都出现混乱。我在下面发布了我的css。

#nav{
 margin: 0 ; padding: 0;
 text-align: center;}
#nav li {
 list-style: none;
 margin: 0 auto;
 position: relative;
 display: inline;}
#nav li a{
 padding: 1em 2em;
 display: inline-block;
 text-decoration: none;
 color: #F2583E ;
 font-family: 'Helvetica Neue';
 font-size:1.25em;}


/*SubMenu*/
    #nav li ul{
     display: inline;
     position: relative;
     left: 0;
     padding: 0; margin:0 100;}
    #nav li:hover > ul{
    }
    #nav li ul li, #nav li ul li a{
     display: inline;}
    #nav li ul li{ 
     _display: inline; /* for IE5*/}
    #nav li ul li a{
      width: 150px;}

这是我的html代码。

   <body>              
 <div class="slide-down-page">
  <ul id="nav">
    <li><a class="active btn" href="home.html">Bio</a></li>
    <li><a href="portfolio.html">Portfolio</a>
        <ul>
            <li><a href="#">Writing</a>
            </li>
            <li><a href="#">Illustrations</a></li>
            <li><a href="#">Design</a></li>
        </ul> 

    </li>
    <li><a href="contact.html">Contact</a></li>
</ul>
    </div>
        </body>

html

css

css-float

回答 1

Stack Overflow用户

回答已采纳

发布于 2015-10-19 18:41:49

请在下面找到更新的代码，希望它能解决您的问题。告诉我你还面临什么问题。

#nav{
 margin: 0 ; padding: 0; position:fixed; width:100%; background:#e7e7e7}
#nav li {
 list-style: none;
 display: inline-block; float:left}
#nav li a{
 padding:10px 20px;
 display: inline-block;
 text-decoration: none;
 color: #F2583E ;
 font-family: 'Helvetica Neue';
 font-size:1.25em; background:#e7e7e7;}
#nav li a:hover{background:#bababa;}
/*SubMenu*/
#nav li:hover ul{display:block;position:absolute; top:43px; width:100%; left:0px; background:#bababa;}
#nav li ul{
 display: none;}
#nav li:hover ul li, #nav li:hover ul li a{
 display: inline-block; float:left; padding:5px; background:#bababa}
#nav li ul li{ 
 _display: inline-block; /* for IE5*/}
#nav li ul li a{
  width: 150px;}

   <body>              
 <div class="slide-down-page">
  <ul id="nav">
    <li><a class="active btn" href="home.html">Bio</a></li>
    <li><a href="portfolio.html">Portfolio</a>
        <ul>
            <li><a href="#">Writing</a>
            </li>
            <li><a href="#">Illustrations</a></li>
            <li><a href="#">Design</a></li>
        </ul> 

    </li>
    <li><a href="contact.html">Contact</a></li>
</ul>
    </div>
        </body>

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/33207443

复制

相似问题

问水平SubMenu
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问水平SubMenuEN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问水平SubMenu
EN