Question

对于我网站的顶级菜单，我使用的是css文件。菜单适合我，但我注意到在较小的屏幕上菜单崩溃，菜单的两个或更多项目因缺乏空间而下降。我试图修改css的不同参数但仍然没有用。任何人都可以建议我修改以下的CSS，以便菜单在不同的设备分辨率下工作相同。

CSS

body {
 margin:0px;
}
#nav { 
    background-color:#262626; 
    width:100%; 
    height:50px; 
    box-shadow: 0px 1px 30px #5E5E5E; 
    position:fixed; 
    top:0px;
}

#nav > ul {list-style:inside none; padding:0; margin:0;} 
#nav > ul > li {list-style:inside none; padding:5px; margin:0; float:left; display:block; position:relative;} 
#nav > ul > li > a{ padding: 10px;  outline:none; display:block; position:relative; padding:12px 20px; font: 1em/100% Arial, Helvetica, sans-serif; text-align:center; text-decoration:none; text-shadow:1px 1px 0 rgba(0,0,0, 0.4); } 

#nav > ul > li > a:after{ content:''; position:absolute;  top:-1px; bottom:-1px; right:-2px; z-index:99; } 
#nav ul li.has-sub:hover > a:after{top:0; bottom:0;} 
#nav > ul > li.has-sub > a:before{ content:''; position:absolute; top:18px; right:6px; border:5px solid transparent; border-top:5px solid #fff; } 
#nav > ul > li.has-sub:hover > a:before{top:19px;} 
#nav ul li.has-sub:hover > a{ background:#2198bf; border-color:#3f3f3f; padding-bottom:13px; padding-top:13px; top:-1px; z-index:999; } 
#nav ul li.has-sub:hover > ul, #cssmenu_top ul li.has-sub:hover > div{display:block;} 
#nav ul li.has-sub > a:hover{background:#2198bf; border-color:#3f3f3f;} 
#nav ul li > ul, #cssmenu_top ul li > div{ display:none; width:auto; position:absolute; top:38px; padding:10px 0; background:#3f3f3f; border-radius:0 0 5px 5px; z-index:999; } 
#nav ul li > ul{width:200px;} 
#nav ul li > ul li{display:block; list-style:inside none; padding:0; margin:0; position:relative;} 
#nav ul li > ul li a{ outline:none; display:block; position:relative; margin:0; padding:8px 20px; font:10pt Arial, Helvetica, sans-serif; color:#fff; text-decoration:none; text-shadow:1px 1px 0 rgba(0,0,0, 0.5); } 

















.title { 
    color:#FF0000; 
    padding-top: 8px;
    font-family:verdana; 
    font-size:20px; 
    width:20px; 
    margin-top:6px; 
    margin-left:150px; 
    font-weight:bold; 
    float:left;
}
.subtitle { 
    color:#FF0000; 
    font-family:verdana; 
    font-size:15px;
}
#navigation{ 
    list-style-type:none; 
}
li { 
    display:inline; 
    padding:10px;
}
#nav a{ 
    font-family:verdana; 
    text-decoration:none; 
    color:#EDEDED;
} 
#nav a:hover { 
    color:#BDBDBD;
}
#body { 
    width:98%; 
    margin:0px auto; 
    margin-top:80px; 
    font-family:verdana;


}
hr {
    border:1px solid #262626;
}


.menu_extended{
    position: fixed;
    width: 100%;
    height: 5px;
    top: 48px;
    left: 0px;
    background-color: #CC0000;
    box-shadow: 0px 1px 30px #5E5E5E; 
}

在我的html页面正文中，我正在编写以下方式来创建菜单：

<div id="nav">
        <p class="title">
            <a href="#"><span style="color:0000FF;"> </span></a>
        </p>
        <ul>
            <li><a href="index.php" >Home</a></li>
            <li><a href="read_home.php">Reading</a></li>
            <li><a href="multimedia.php">Multimedia</a></li>
            <li><a href="test_home.php" >Test Yourself</a></li>
            <li><a href="sit_for_exam.php" style="background-color:#CC0000;font-size:19px;color:#FFFFFF;border-radius:0px;">Sit for Exam</a></li>
            <li><a href="test_analysis_home.php">Analysis</a></li>
            <li><a href="tips.php">Tips And Tricks</a></li>
            <li><a href="about.php">About</a></li>
        </ul>

    </div>

有任何帮助吗？

Answer 1

可以通过媒体查询轻松实现响应式菜单栏。如果您不了解它们，请在google上进行搜索。我正在为您提供演示网址https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries。
在此，您必须根据设备的宽度

将css应用于菜单栏

Answer 2

制作响应式菜单栏并定位每个设备。你可以使用@media queries。

// normal style
#header-image {
    background-repeat: no-repeat;
    background-image:url('image.gif');
}

// show a larger image when you're on a big screen
@media screen and (min-width: 1200px) {
    #header-image {
        background-image:url('large-image.gif');
    }
}

// remove header image when printing.
@media print {
    #header-image {
        display: none;
    }
}

如何使我的菜单屏幕大小独立于CSS

2 个答案: