Доброго времени суток! У меня к вам немного странный вопрос по поводу меню, надеюсь то-нибудь мне поможет)
Нужно сделать позиционированное меню, которое будет находится так, как указано на картинке ниже. Но при наведении на заголовки, слева должно отображаться развернутое меню (выравнивание по правому краю)

Идея взята собственно отсюда, но код сложный, самой разобраться не получилось(
Код того ,что есть пока:

 body { background: url('/userdir/1/4/4/3/144393/49736729.jpg')}
 body{background-attachment:fixed;}
 #extratop { background: url('/userdir/1/4/4/3/144393/51489944.jpg') no-repeat; width: 800 height: 423 }
 .avatar img {border: 4px double black}
 .attags {text-transform: normal;}
 .header span {display:none}
 .sigh { border:2px black; }
 #epigraph, #post0 {padding-bottom: 0px !important;}
 #upInChart {display:none}
 #diarySupportLink {display:none}
 #paySupportLink {display:none}
 #rssLink {display:none}
 #postsCalendar {display:none}
 .quote_post {display:none}
 #myDraftLink {display:none}
 #side{width:128px !important;margin:0 !important}
 #upInChart {display:none}
 #myProfileLink {display:none}
 #more_login {display:none}
 #myStatLink {display:none}
 #tagslistlink {display:none}
 #albumLink {display:none}
 #YaSearch {display:none}
 #urlLink {display:none}
 #sortOrder {display:none}
 #photolibLink {display:none}
 #authorLiks {display:none}
 #authorQuot {display:none}
 #myLinksLink {display:none}
 #authorFav {display:none}
 .paragraph{overflow: auto;}
 #authorAlbum {display:none}
 #Searchdiary {display: none}
 #myFavLink {display:none}
 #allDiaryLink {display:none}
 #delFromFav {display:none}
 #communityCatalogueLink {display:none}
 #diarySpiritLink {display:none}
 #faqLink {display:none}
 #headlineList {display:none}
 #topNav {display:none}
 #faqLink {display:none}
 #wrapper{min-width:800px!important;width:800margin: 0 auto !important;padding:0 !important;overflow:hidden !important; }
 #page-c{width:800px !important;padding:0 !important;padding:0 !important}
 #page-t {margin:0 !important}
 a:hover { color: black; }
 A:hover {text-decoration:none !important;}
 a {text-decoration:none !important;}
 #pchs { float:left; visibility:hidden; }
 #pchs a { float:left; clear:both; width:100%; display:block; visibility:visible;}
 .menuSection {text-align:left; }
 a:hover{cursor: crosshair;}
 a:hover,a:active{color:#365856 !important}
 #side{line-height: 1.0;}
 .countFirstDate,.countSecondDate {text-align:center; border: 1px dotted; }
 #side {text-transform: lowercase; }
 .postLinks {text-transform: lowercase; }
 #side {top: 15px !important; }
 #side {width:139px !important; margin:0 !important}
 div#side .menuSection {border:none}
 div#thisDiaryInfo {background:none}
 .menuSection {size:14px}
 .countFirstDate,.countSecondDate {font-family: Adventure; size:20px}
 .pageBar,.header {font-family: Adventure; size:14px}
 .countFirstDate,.countSecondDate,.pageBar,.header {text-align:center;}
 .sign { background-color: #c4d3f2; margin-left: 0px !important; border-style:dotted; border-width: 1 border-color:#ffffff;}
 #side{position:absolute !important;}
 #wrapper{background:url('/userdir/1/4/4/3/144393/51489986.png');}
 #side h1 A {font-size: 20px !important;}
 #extrabottom {background: url('/userdir/1/4/4/3/144393/51489797.png') no-repeat; width:924 height:92 line-height: 100% !important; margin-top: -10}

Смотрите также