Question

我正在尝试显示以下菜单

|  HOME  |
|  GAMES |
| PLAYERS|
|SCHEDULE|

问题是我的菜单显示如下

|  HOME  || GAMES |
|PLAYERS||SCHEDULE|

还有..如何将它的宽度设置为一致？，现在它只需要| HOME |中的单词长度。但我想把它设置为一个修正号码..我是新来的css请帮助

.#tabshor {
    width:100%;
    font-size:50%;
    line-height:5px;
    }

#tabshor ul {
    margin:-30px;
    padding:150px 0px 0px 0px;
    line-height:10px;
    }

#tabshor li {
    display:block;
    margin:0;
    padding:5;
    }

#tabshor a {
    float:left;
    background:url("../images/tableft.gif") no-repeat left top;
    margin:0;
    padding:0 0 0 3px;
    text-decoration:none;
    }

#tabshor a span {
    float:left;
    display:block;
    background:url("../images/tabright.gif") no-repeat right top;
    padding:10px 20px 20px 10px;
    color:#FFF;
    }

#tabshor a span {float:none;}


#tabshor a:hover span {
    color:#FFF;
    }

#tabshor a:hover{
    background-position:0% -42px;
    }

#tabshor a:hover span {
    background-position:100% -42px;
    }

div#tabshor>ul>li {   
        display:block; 
        position:relative;
        float:left;
        list-style:none;
        left:50px;
    }

 div#tabshor>ul>li ul{
            position:absolute; display:none;
            list-style:none;
            left:100px;    
        }

 div#tabshor>ul>li>a{
            display:block;
        }

  div#tabshor>ul>li:hover ul{
      display:block;  
      z-index:500; 
      width:50%;
      margin:10px 0px 0px -20px;    
      width:100%;
      }

div#tabshor ul li ul a{
    display:block;
    width: 50px;
}

div#tabshor ul li a:hover{
     background:red;
     font-style: oblique;
}

这是HTML

 <div id="left_banner" class="divleftside">
    <div id="tabshor">
        <ul>
            <li><a href="index.html"><span>HOME</span></a></li>
            <li><a href="#"><span>GAMES</span></a></li>
            <li><a href="#"><span>PLAYERS</span></a>
                <ul>
                    <li><a href="PLAYEERS.html"><span>PLAYERS</span></a></li>
                    <li><a href="#"><span>SOCCER</span></a></li>
                    <li><a href="#"><span>BASKETBALL</span></a></li>               
                </ul>
            </li>
            <li><a href="#"><span>COURTS</span></a></li>
            <li><a href="#"><span>REFEREES</span></a></li>
            <li><a href="#"><span>ABOUT US</span></a></li>
            <li><a href="#"><span>CONTACT US</span></a></li>
            <li><a href="#"><span>REGISTER</span></a></li>
        </ul>
    </div>
       </div>

Answer 1

尝试：

从float: left

div#tabshor>ul>li

从float: left

#tabshor a

将width: 170px;添加到div#tabshor>ul>li>a

清理CSS可能会减少头痛。另外，从this vertical rollover list或this nested vertical rollover list这样的示例开始可能会更容易。

css中的垂直菜单没有正确格式化

1 个答案: