2017-02-12 4 views
0

Я использовал следующий код, чтобы создать простую правую вертикальное менюОтображение содержимого рядный с меню

#cssmenu { 
    padding: 0; 
    margin: 0; 
    border: 0; 
} 
#cssmenu ul, 
#cssmenu li { 
    list-style: none; 
    margin: 0; 
    padding: 0; 
} 
#cssmenu ul { 
    position: relative; 
    z-index: 597; 
    float: right; 
} 
#cssmenu ul li { 
    float: right; 
    min-height: 1px; 
    line-height: 1.5em; 
    vertical-align: middle; 
    text-align:right; 
} 
#cssmenu ul li.hover, 
#cssmenu ul li:hover { 
    position: relative; 
    z-index: 599; 
    cursor: default; 
} 
#cssmenu ul ul { 
    visibility: hidden; 
    position: absolute; 
    top: 100%; 
    right: 0; 
    z-index: 598; 
    width: 100%; 
} 
#cssmenu ul ul li { 
    float: none; 
} 
#cssmenu ul ul, 
#cssmenu ul ul ul { 
    top: -1px; 
    right: 99%; 
} 
#cssmenu ul li:hover > ul { 
    visibility: visible; 
} 
#cssmenu ul li { 
    float: none; 
} 
#cssmenu a { 
    display: block; 
} 
/* Custom CSS Styles */ 
#cssmenu { 
    font-family: 'Segoe UI', Arial, sans-serif; 
    font-size: 11px; 
} 
#cssmenu:after, 
#cssmenu ul:after { 
    content: ''; 
    display: block; 
    clear: both; 
} 
#cssmenu ul { 
    background: #F0EFEA; 
    border: 1px solid #AAAAAA; 
    padding: 4px; 
    width: 200px; 
} 
#cssmenu ul li { 
    color: #000; 
    position: relative; 
} 
#cssmenu ul li.hover, 
#cssmenu ul li:hover { 
    background: #407a1e url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAARCAMAAAArHTYgAAAAM1BMVEVMjiNMjiNMjiNMjiNMjiNMjiNMjiNMjiNMjiNMjiNMjiNMjiNMjiNMjiNMjiNMjiNMjiNeSdtTAAAAEHRSTlP2697Pv66biXZkUUAwIRQJC+dRrgAAACJJREFUeF4FwIcNgCAAALCyN/r/tcSPIEqyomq6YVq24/oeBwoAieqEWU4AAAAASUVORK5CYII=) repeat-x; 
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #4b8e23), color-stop(1, #407a1e)); 
    background-image: -webkit-linear-gradient(top, #4b8e23, #407a1e); 
    background-image: -moz-linear-gradient(top, #4b8e23, #407a1e); 
    background-image: -ms-linear-gradient(top, #4b8e23, #407a1e); 
    background-image: -o-linear-gradient(top, #4b8e23, #407a1e); 
    background-image: linear-gradient(#4b8e23, #407a1e); 
    color: #FFF; 
} 
#cssmenu ul li.hover > a, 
#cssmenu ul li:hover > a { 
    color: #FFF; 
    border: 1px solid #327E04; 
} 
#cssmenu ul ul { 
    width: 150px; 
} 
#cssmenu a { 
    border: 1px solid transparent; 
    padding: 3px 10px; 
} 
#cssmenu a:link, 
#cssmenu a:visited { 
    color: #000; 
    text-decoration: none; 
} 
#cssmenu a:hover { 
    background: #4b8e23 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAARCAMAAAArHTYgAAAAM1BMVEVMjiNMjiNMjiNMjiNMjiNMjiNMjiNMjiNMjiNMjiNMjiNMjiNMjiNMjiNMjiNMjiNMjiNeSdtTAAAAEHRSTlP2697Pv66biXZkUUAwIRQJC+dRrgAAACJJREFUeF4FwIcNgCAAALCyN/r/tcSPIEqyomq6YVq24/oeBwoAieqEWU4AAAAASUVORK5CYII=) repeat-x; 
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #6ea936), color-stop(1, #4b8e23)); 
    background-image: -webkit-linear-gradient(top, #6ea936, #4b8e23); 
    background-image: -moz-linear-gradient(top, #6ea936, #4b8e23); 
    background-image: -ms-linear-gradient(top, #6ea936, #4b8e23); 
    background-image: -o-linear-gradient(top, #6ea936, #4b8e23); 
    background-image: linear-gradient(#6ea936, #4b8e23); 
    color: #FFF; 
} 
#cssmenu a:active { 
    color: #ffa500; 
} 
#cssmenu .has-sub:hover > a:after, 
#cssmenu .has-sub.hover > a:after { 
    border-color: transparent transparent transparent #FFF; 
} 
#cssmenu .has-sub > a:after { 
    content: ''; 
    width: 0px; 
    height: 0px; 
    border-style: solid; 
    border-width: 4px 4px 4px 0px; 
    border-color: transparent #808080 transparent transparent; 
    position: absolute; 
    top: 50%; 
    left: 5%; 
    margin-top: -4px; 
    -webkit-transform: rotate(360deg); 
} 

http://jsfiddle.net/8jk2V/1/

Однако после добавления этого меню на все страницы, я вижу, что все содержимое страницы идет после меню.

Screenshot

Как сделать содержание, чтобы начать с верхней части страницы?

ответ

0

Вы можете использовать float:

#cssmenu { 
    padding: 0; 
    margin: 0; 
    border: 0; 
    float: right; 
} 
Смежные вопросы