0
У меня есть эта панель навигации, и HTML работает; Я попытался изменить его с помощью CSS, установив фиксированную позицию. В настоящее время он не отображает каждую опцию только одну. Я хочу, чтобы положение, чтобы оставаться неподвижной, но отобразить все меню, а не только одну частьМоя панель навигации отображается неправильно
[I circled the part that is messed up][1]
div {height:150px;border:1px yellow; background:#ffffff ;}
nav.menu {
\t margin:19px auto;
\t padding:0;
\t font-size:.8em;
\t text-align:center;
\t }
nav.menu > ul {
\t display:block;
\t }
nav.menu li {
\t float:left; /* makes menu horizontal */
\t list-style-type:none; /* removes default bullets off lists */
\t position:fixed; /* position context for child list */
\t }
nav.menu ul li a {
\t display:block; /* makes link fill line*/
\t padding:1em 9em;
\t background-clip:padding-box; /* background only under padding, not border */
\t text-align:left;
\t text-decoration:none; /* removes link underlining */
\t font-family:"Source Sans Pro", helvetica, sans-serif;
\t font-style: normal;
\t font-weight:600;
\t font-size:1.2em;
\t color:white;
\t -webkit-font-smoothing: antialiased; /* prevents pop of anti-alias change at end of opacity transition */
\t }
nav.menu li.choice1 a {
\t background:black;
\t }
nav.menu li.choice2 a {
\t background:black;
\t }
nav.menu li.choice3 a {
\t background:black;
\t }
nav.menu li.choice4 a {
\t background:black;
\t }
nav.menu li.choice5 a {
\t background:black;
\t }
nav.menu li:hover > a {
\t color:red;
\t border-color:#fff;
\t border:0;
\t }
nav.menu li:last-child a {
\t border-bottom-right-radius:10px;
\t }
nav.menu li:first-child a {border-top-left-radius:10px;}
/* level 2 menus */
nav.menu li ul {
\t opacity:0; \t
\t visibility:hidden; position:absolute; /* position relative to parent menu */
\t width:12em;
\t left:0px; /* aligns left of sub-menu to parent */
\t top:100%; \t /* aligns bottom of sub-menu to parent */
\t }
.touch nav.menu li ul { /* uses modernizer to only transition opacity of touch devices */ \t
\t -webkit-transition: 1s opacity;
\t -moz-transition: 1s opacity;
\t transition: 1s opacity;
\t }
nav.menu li ul {
\t -webkit-transition: 1s all .2s;
\t -moz-transition: 1s all .2s;
\t transition: 1s all .2s;
\t }
nav.menu li:hover > ul {
\t opacity:1; /* both properties are transitioned */
\t visibility:visible;
\t }
nav.menu li li {
\t float:none; /* kills inherited float - makes list stack */
\t }
nav.menu li li:first-child a {
\t border-radius:0;
\t }
nav.menu li li:last-child a {
\t border-bottom-left-radius:10px;
\t }
.no-csstransitions nav.menu li ul { /* for no-transitions browsers */
\t visibility:visible; /* overrides transitions version */
\t opacity:1; /* overrides transitions version */
\t display:none; /* hides menu if no css transition capability */
\t }
.no-csstransitions nav.menu li:hover > ul {
\t display:block; /* displays menu when parent hovered */
\t }<!DOCTYPE html PUBLIC >
<html>
<head>
<link rel="stylesheet" type="text/css" href="CSS1.css">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>LeadingEdgeLabs Home</title>
</head>
<body>
<!--navigation bar at the top-->
<div>
<nav class="menu">
<ul>
<li class="choice1"><a href="home-page.html">Home</a></li>
<li class="choice2"><a href="photo-gallery.html">Photo gallery</a></li>
<li class="choice3"><a href="blogs.html">Blogs</a></li>
<li class="choice4"><a href="contact-us.html">Contact us</a>
<ul>
<li><a href="#">Twitter</a></li>
<li><a href="#">Facebook</a></li>
<li><a href="#">Email</a></li>
<li><a href="#">Phone</a></li>
<ul></li>
</ul>
</div>
По какой-то причине он не позволил мне добавить ссылку на [скрипку] (http://jsfiddle.net/lamsharkie/c1mdt4u0/2/) как нормальный. Там вы найдете разбивку, и вы также увидите отображение кода. –
Хорошо, спасибо, но я, когда я запускаю фрагмент кода, а не полный экран, устанавливает стек друг на друга; все равно держать их в прямой линии? –
Итак, проверьте редактирование. Это подтолкнет вещи вверху. Элементы «Block» не будут сидеть бок о бок, поэтому я изменил ваши «ul» и «li» от блока к inline ... это позволит им сидеть в одной строке. При переходе на более мелкие устройства, ваше меню будет выглядеть не очень хорошо. Рассматривали ли вы использование Bootstrap3 .... по крайней мере, для вашего навигатора? www.getboostrap.com Нажмите на компоненты ... navbar (из списка справа) и скопируйте код в нужную вам навигацию ... просто удалите то, что вам не нужно, и скопируйте элементы li по мере необходимости , Кроме того, все чувствительные CSS встроены в BS3. –