0

我已经尝试了所有方法，似乎每次使用"\n" or <br> or <br />. 我试过<pre></pre>了，但它破坏了设计。

我应该在哪里放置东西？

它看起来像左边，但我需要它像右边一样，相互组织

在此处输入图像描述

<li><a href="portfolio.php">portfolio</a>
        <ul>
        <?php   
        $query_nav = mysql_query("SELECT * FROM `nav` ");
        while ($query_row_nav = mysql_fetch_assoc($query_nav))
        {
        ?>
        <li>
        <?php
        $meer = $query_row_nav['title'];
        //$desc_inject = '';
        //$sub_string = substr($desc_inject, 0, 200);                             
        echo /*$sub_string." " . '' . */'<a href="applink.php?id='.$query_row_nav["id"].'">' . $meer .'</a>';
        ?>
        </li>
        <?php
        }
        ?>
        </ul>
    </li>

CSS

    /* Main Nav */ 

#navigation{
    background: #231f20; 
    font-size: 1.143em; 
    height: 50px; 
    line-height: 30px; 
    margin-top: 57px;
    margin-right: 2px;
    text-align: center; 
    width: 1010px;  
    border-radius: 5px; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px;
}

#navigation ul, #navigation li { 
    list-style:none; 
    padding:0; 
    margin:0; 
    display:inline; 
    }

#navigation ul li{ 
    float:left;
    position:relative; 
    }

#navigation ul li a{
    display: inline-block;
    padding:10px 30px; 
    margin:1px; 
    font-size:18px; 
    white-space:nowrap; 
    border-radius:3px; 
    text-decoration: none; 
    height: 30px; 
    text-decoration: none; 
}
#navigation ul ul{ 
    position:absolute; 
    top:-99999px; 
    left:0;
    opacity: 0;
    -webkit-transition: opacity .5s ease-in-out;
    -moz-transition: opacity .5s ease-in-out;
    -o-transition: opacity .5s ease-in-out;
    z-index:497; 
    background:#333; 
    padding: 2px; 
    border:1px solid #231f20; 
    border-top:none; 
    box-shadow:#111 0 3px 4px; 
    border-bottom-left-radius:6px; 
    border-bottom-right-radius:6px; 
}
#navigation ul ul ul { 
    position:absolute; 
    top:-99999px; 
    left:100%; 
    opacity: 0; 
    -webkit-transition: opacity .5s ease-in-out;
    -moz-transition: opacity .5s ease-in-out;
    -o-transition: opacity .5s ease-in-out;
    border-radius:6px;
    border:1px solid #231f20;
}
#navigation ul li:hover>ul{ 
    opacity: 1; 
    position:absolute; 
    top:99%; left:0; 
    }
#navigation ul ul li:hover>ul{ 
    position:absolute; 
    top:0; 
    left:100%; 
    opacity: 1; 
    z-index:497; 
    background:#231f20; 
    }

#navigation li:first-child a { 
    border-top-left-radius: 3px; 
    -moz-border-radius-topleft: 3px; 
    -webkit-border-top-left-radius: 3px;  
    border-bottom-left-radius: 3px; 
    -moz-border-radius-bottomleft: 3px; 
    -webkit-border-bottom-left-radius: 3px; 
    }
4

4 回答 4

2

你可以改变一些选择器：

#navigation ul, #navigation li

到

#navigation ul, #navigation > ul > li

和

#navigation ul li

到

#navigation > ul > li
于 2012-09-23T19:29:48.787 回答
1

删除浮动：左；

#navigation ul li{ 
    position:relative; 
}
于 2012-09-23T19:26:17.450 回答
1

你的问题是

#navigation ul li{ 
    float:left;
    position:relative; 
}

消除float:left;

于 2012-09-23T19:26:47.480 回答
1

尝试删除display:inline并display:block;改用。参见示例http://www.w3schools.com/cssref/playit.asp?filename=playcss_display&preval=inline

#navigation ul, #navigation li { 

list-style:none; 
padding:0; 
margin:0; 
display:block;
}

并将其删除display: inline-block;并更改为 display: block;

#navigation ul li a{
    display: block;
    padding:10px 30px; 
    margin:1px; 
    font-size:18px; 
    white-space:nowrap; 
    border-radius:3px; 
    text-decoration: none; 
    height: 30px; 
    text-decoration: none; 
}
于 2012-09-23T19:32:27.467 回答